import React, {PureComponent} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  Image,
  Modal,
  ActivityIndicator,
  TouchableWithoutFeedback,
  KeyboardAvoidingView,
} from 'react-native';
import PropTypes from 'prop-types';
import LinearGradient from 'react-native-linear-gradient';

const styles = StyleSheet.create({});
export default class Loading extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      rotateVal: new Animated.Value(0),
    };
  }

  static propTypes = {
    handlerView: PropTypes.func.isRequired,
    onPressBackground: PropTypes.func,
    visible: PropTypes.bool.isRequired,
    loading: PropTypes.bool,
  };

  static defaultProps = {
    visible: false,
    loading: false,
    success: false,
    handlerView: null,
    onPressBackground: () => {},
  };

  componentDidUpdate(prevProps) {
    if (this.props.loading == true) {
      console.log('执行动画');

      this.animationLoading = Animated.timing(
        this.state.rotateVal, // 初始值
        {
          toValue: 360, // 终点值
          useNativeDriver: true,
          duration: 1500,
          easing: Easing.linear, // 这里使用匀速曲线，详见RN-api-Easing
        },
      );
      Animated.loop(this.animationLoading).start(); // 开始动画
    } else if (this.animationLoading) {
      console.log('移除动画====');

      Animated.loop(this.animationLoading).stop;
      this.state.rotateVal = new Animated.Value(0);
    }
  }

  componentDidMount() {}

  componentWillUnmount() {
    console.log('移除视图，移除动画====');
    if (this.animationLoading) {
      Animated.loop(this.animationLoading).stop;
    }
  }

  render() {
    const {
      visible,
      onPressBackground,
      handlerView,
      loading,
      success,
    } = this.props;

    return (
      <Modal animationType="fade" transparent visible={visible}>
        <KeyboardAvoidingView
          behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
          style={{width: '100%', flex: 1}}>
          <View
            style={{
              justifyContent: 'flex-end',
              flex: 1,
              backgroundColor: 'rgba(151,151,151,0.5)',
            }}>
            <TouchableWithoutFeedback onPress={onPressBackground}>
              <View
                style={{
                  flex: 1,
                  width: '100%',
                }}></View>
            </TouchableWithoutFeedback>
            <View
              style={{
                backgroundColor: 'rgba(255,255,255,0.95)',
                width: '100%',
                alignItems: 'flex-start',
                padding: 20,
                position: 'absolute',
                bottom: 0,
                left: 0,
                borderTopLeftRadius: 15,
                borderTopRightRadius: 15,
              }}>
              {handlerView()}
              {loading ? (
                success ? (
                  <View
                    style={{
                      position: 'absolute',
                      left: 0,
                      top: 0,
                      bottom: 0,
                      right: 0,
                      backgroundColor: 'rgba(255,255,255,1)',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <Image
                      source={require('../assets/auction/auction_modal.png')}
                      style={{
                        width: 120,
                        height: 120,
                        marginBottom: 20,
                      }}
                    />
                    <LinearGradient
                      start={{x: 0, y: 1}}
                      end={{x: 1, y: 1}}
                      colors={['#CE18EC', '#6601F5']}
                      style={{
                        width: 150,
                        height: 44,
                        justifyContent: 'center',
                        alignItems: 'center',
                        flexDirection: 'row',
                        borderRadius: 22,
                      }}>
                      <Image
                        source={require('../assets/auction/check.png')}
                        style={{
                          width: 25,
                          height: 25,
                          marginRight: 10,
                        }}
                      />
                      <Text style={{color: 'white', fontWeight: 'bold'}}>
                        Successful!
                      </Text>
                    </LinearGradient>
                    <Image
                      source={require('../assets/auction/star.png')}
                      style={{
                        position: 'absolute',
                        width: 30,
                        height: 30,
                        top: '50%',
                        left: '20%',
                      }}
                    />
                    <Image
                      source={require('../assets/auction/star.png')}
                      style={{
                        position: 'absolute',
                        width: 17,
                        height: 17,
                        right: '20%',
                        bottom: '20%',
                      }}
                    />
                  </View>
                ) : (
                  <View
                    style={{
                      position: 'absolute',
                      left: 0,
                      top: 0,
                      bottom: 0,
                      right: 0,
                      backgroundColor: 'white',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <Animated.Image
                      style={{
                        transform: [
                          {
                            rotate: this.state.rotateVal.interpolate({
                              inputRange: [0, 360],
                              outputRange: ['0deg', '360deg'],
                            }),
                          },
                        ],
                      }}
                      source={require('../assets/common/loading.png')}></Animated.Image>
                    <Text
                      style={{
                        marginTop: 10,
                        color: '#C817EC',
                        fontWeight: 'bold',
                      }}>
                      Loading
                    </Text>
                  </View>
                )
              ) : null}
            </View>
          </View>
        </KeyboardAvoidingView>
      </Modal>
    );
  }
}
